<!-- :style="drawer == true ? 'opacity:0.5':'opacity:1'" -->
<template>
	<a class="v-feature" target="_blank" :href="`/article/${data.id}`" @mouseover="drawer = true" @mouseleave="drawer=false">
		<el-image :src="data.image" fit="cover">
			<div slot="error" class="image-slot">
				<img src="https://wdz-1258450135.cos.ap-shanghai.myqcloud.com/layuibokemoban/images/theshy.jpg" />
			</div>
		</el-image>
		<el-drawer
		  :visible.sync="drawer"
		  direction="btt"
		  :modal="false"
		  :withHeader="false">
		  <p class="title">{{data.title}}</p>
		</el-drawer>
	</a>
</template>

<script>
	export default {
		name: "feature",
		data(){
			return{
				drawer: false
			}
		},
		props: {
			data: {
				type: Object,
				default: () => {
					return {
						title: 'Akina',
						img: 'https://cdn.zhebk.cn/usr/themes/Akina//images/feature/feature1.jpg',
						href: 'https://zhebk.cn/Web/Akina.html'
					}
				}
			}
		}
	}
</script>
<style lang="less">
	.v-feature{
		display: block;
		position: relative;
		border-radius: 5px;
		overflow: hidden;
		margin-bottom: 6px;
		.el-drawer__wrapper{
			position: absolute;
			height: 30% !important;
			bottom: 0;
			left: 0;
			top: unset;
			right: unset;
			width: 100%;
			.el-drawer{
				background-color: rgba(0,0,0,0.1);
				height: 100% !important;
			}
			.title{
				text-align: center;
				padding: 10px;
				color: #FFFFFF;
			}
		}
	}
</style>
<style scoped lang="less">
</style>
